<!-- 活动列表 -->
<template>
  <view class="container">
    <view class="en">&nbsp; </view>
    <view class="search-box" hover-class="search-box-hover" hover-stop-propagation="false">
      <!-- 单号查询输入框 -->
      <view class="search-box-input">
        <image class="search-icon" src="https://img.qumoyugo.com/webimgbg/home_nearby_search.png" />
        <input class="search-input" v-model="searchInfo" type="text" placeholder="请输入活动名称查询" />
        <view @click="search" class="searchBtn">搜索</view>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="data-box" v-for="item in orderList.list" :key="item.id" @click="navigationTo(item)">
      <OrderCard :data="item"></OrderCard>
    </view>
    <!-- 空白 -->
    <view v-if="orderList.list.length <= 0" class="empty_icon">
      <image
        style="height: 404rpx; width: 600rpx"
        src="https://img.qumoyugo.com/img/default_page_no_order_icon.png"
        mode="aspectFit"
      />
    </view>
    <!-- 加载更多 -->
    <uni-load-more
      :status="reloadData.status"
      :icon-size="5"
      :content-text="reloadData.contentText"
      v-if="orderList.list.length > 9"
    />
    <view v-if="orderList.list.length <= 9" class="bottom-en">&nbsp; </view>
  </view>
</template>

<script setup>
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import OrderCard from '@/components/order/activity/activityListCard.vue'
import { ref, onMounted, getCurrentInstance, computed } from 'vue'

import { useStore } from 'vuex'
const { $https } = getCurrentInstance().appContext.config.globalProperties

const store = useStore()
const user = computed(() => store.state.profile)
// 页面输入的查询条件
const searchInfo = ref('')
// 页面list数据
const orderList = ref({
  query: {
    page: 1,
    pageSize: 10,
    activityName: searchInfo,
    servicerId: user.value.id
  },
  total: 0,
  list: []
})
/**
 * 点击跳转
 */
const navigationTo = item => {
  uni.navigateTo({
    url: '/pages/activity/activityOrderList?eventsId=' + item.id
  })
}
/**
 * 搜索
 */
const search = () => {
  orderList.value.list = []
  orderList.value.query.page = 1
  getDataList()
}
/**
 * 初始化挂载请求数据
 */
onMounted(() => {
  uni.setNavigationBarTitle({
    title: '活动列表'
  })
  getDataList()
})
/**
 * 重新加载显示数据
 */
const reloadData = ref({
  reload: false,
  status: 'more',
  contentText: {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '我是有底线的~'
  }
})
/**
 * 获取订单列表
 */
const getDataList = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/activity/list',
      type: '',
      method: 'get',
      data: orderList.value.query
    })
      .then(res => {
        if (res.code === 0) {
          // 组装数据
          orderList.value.list = orderList.value.list.concat(res.data.items)
          orderList.value.total = res.data.pagination.total_record
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}

// 下拉刷新，请求第一页
onPullDownRefresh(() => {
  orderList.value.list = []
  orderList.value.query.page = 1
  Promise.all([getDataList()]).then(row => {
    uni.stopPullDownRefresh()
  })
})

// 上拉加载
onReachBottom(() => {
  if (orderList.value.total > orderList.value.list.length) {
    reloadData.value.status = 'loading'
    orderList.value.query.page += 1
    getDataList()
  } else {
    reloadData.value.status = 'no-more'
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/home_index.scss';
.bottom-en {
  padding-bottom: 20rpx;
}
.empty_icon {
  text-align: center;
  margin-top: 165rpx;
}
</style>
